import { Story, Meta, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
import CommonProps from '../../../.storybook/common-props';
import Level from '.';
import * as stories from './level.story';

<Meta title="Layout/Level" />

# Level

A layout component that aligns children horizontally.

The `Level` component has the following structured:

- `<Level>`: The main container
  - `<Level.Side align="left">` aligns its children to the left side of `Level`
  - `<Level.Side align="right">` aligns its children to the right side of `Level`
    - `<Level.Item>` represents the individual items in `Level`. **Content of `Level.Item` will be vertically centerd**.

If you use the `Level.Item` directly as a child of `Level` the items will be centered.

## Props

<ArgsTable of={Level} />

## Components

### Level.Side

<ArgsTable of={Level.Side} />

### Level.Item

<ArgsTable of={Level.Item} />

<CommonProps />

## Example

<Canvas>
  <Story story={stories.Default} name="Level" />
</Canvas>


## Related

- [Official documentation](https://bulma.io/documentation/layout/level)